<template>
  <n-loading-bar-provider>

  <div>
    <!-- 头部 -->
    <Header
    class="header"
    @open-menu-dialog="OpenMenuDialog"
    />

    <!-- 主体 -->
    <main>
      <MenuDialog
      class="lin_menu_dialog"
      />
      <slot/>
      
    </main>
  </div>
</n-loading-bar-provider>
</template>


<script lang="ts">
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
import {useUserState} from '@/states/pinia'
gsap.registerPlugin(ScrollTrigger);
export const useModelWrapper = (props: any, emit: any, name = 'modelValue') => {
  return computed({
    get: () => props[name],
    set: (value) => emit(`update:${name}`, value),
  })
}
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object,
    }
  },
  async setup(props: any, { emit }: any) {
    const data = reactive({
      menudialog: ref(false)
    })
    const router = useRouter()
    const Gsap = gsap.timeline({delay: 0.8, repeatDelay: 0.8})
    const OpenMenuDialog = async() => {
      console.log(data.menudialog);
      if (data.menudialog){
        Gsap.to(".lin_menu_dialog", {duration: 0.5, ease: 'power1', opacity: 0, display: 'none', x: -400})
        data.menudialog = false
      }
      else {
        Gsap.to(".lin_menu_dialog", {duration: 0.5, ease: 'power2', opacity: 1, display: 'flex', x: 0})
        data.menudialog = true
      }
    }

    router.beforeEach((to, from, next) => {
      if(to.path === '/login'){
        gsap.to('.header', {duration: 0.5, ease: 'power2', opacity: 0, x: -100})
        next()
      }
      else if(to.path === '/'){
        gsap.to('.header', {duration: 0.5, ease: 'power2', opacity: 1, x: 0})
        next()
      }
      else{
        next()
      }
    })


    const GSAP = async() => {
      if(router.currentRoute.value.path === '/login') {
        gsap.to('.header', {duration: 0.5, ease: 'power2', opacity: 0, x: -100})
        return
      }
      gsap.fromTo('.header',
      {
        opacity: 0,
        x: -100,
      }
      ,{
        opacity: 1,
        x: 0,
        duration: 1,
        ease: 'power2.out',
      }) 
    }



    onMounted(() => {
      GSAP()
    })


    return{
      OpenMenuDialog
    }
  }
})
</script>

<style scoped>
.header {
  z-index: 999;
}
.lin_menu_dialog {
  position: absolute;
  z-index: 1;
  display: none;
}
</style>